<template>
	<sl-page title="登陆" :safeBottom="false" customStyle="background: #fff !important;">
		<view class="container">
			<!-- 页面头部 -->
			<view class="header">
				<view class="header-logo">
					<sl-image :value="avatar" mode="aspectFit"></sl-image>
				</view>
			</view>
			<!-- 表单 -->
			<view class="" v-if="!bind">
				<view class="login-form">
					<!-- 手机号 -->
					<view class="form-item">
						<input class="form-item--input" type="number" v-model="mobile" maxlength="11"
							placeholder="请输入手机号码" />
					</view>
					<!-- 图形验证码 -->
					<view class="form-item">
						<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
							placeholder="请输入图形验证码" />
						<view class="form-item--parts">
							<view class="captcha" @click="getCaptcha()">
								<image class="image" :src="showCaptcha"></image>
							</view>
						</view>
					</view>
					<!-- 短信验证码 -->
					<view class="form-item">
						<input class="form-item--input" type="number" v-model="smsCode" maxlength="6"
							placeholder="请输入短信验证码" />
						<view class="form-item--parts flex-middle-center">
							<view class="captcha-sms" @click="handelSmsCaptcha()">
								<text v-if="!smsState" class="activate">获取验证码</text>
								<text v-else class="un-activate">重新发送({{ times }})秒</text>
							</view>
						</view>
					</view>
					<!-- 登录按钮 -->
					<view class="login-button" @click="handleLogin">
						<text>登录</text>
					</view>
				</view>
				<!-- 其他登陆 -->
				<view class="login-other">
					<block v-if="!first">
						<text class="other">其他登陆方式</text>
						<view class="login-type" @click="wxLogin">
							<image class="custom-icon iconfont-size-big" src="../static/icon-a-weixin1.svg"></image>
						</view>
					</block>
				</view>
				<!-- 用户协议 -->
				<view class="login-footer">
					<view class="flex flex-y-center">
						<image   class="check-agreement" :class="{'checked': agreement}"  @click="changeAgreement()"></image>
						<view class="px-l-1">
							已阅读并同意
						</view>
						<view class="text-agreement" @click="$app.navTo('xj_user/agreement/index')">
							《星橘联动服务及隐私条款》
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="auth-title">申请获取以下权限</view>
				<view class="auth-subtitle">获得你的手机号</view>
				<view class="login-btn">
					<button class="button" @click="onEmitSuccess">绑定手机号</button>
				</view>
			</view>
		</view>
	</sl-page>
</template>

<script>
	import Constants from '@/constants';
	import CaptchaApi from '@/api/user/captcha'
	import VerifyApi from '@/api/user/verify';
	import Platform from '@/utils/platform/index.js';
	import * as Verify from '@/utils/verify';

	//倒计时时长(秒)
	const times = 60
	//表单验证场景
	const GET_CAPTCHA = 10
	const SUBMIT_LOGIN = 20

	export default {
		//
		mixins: [ Constants ],

		components: {

		},

		data() {
			return {
				//正在加载
				isLoading: false,
				//手机号
				mobile: '',
				//图形验证码信息
				captcha: {},
				//图形验证码
				captchaCode: '',
				//短信验证码发送状态
				smsState: false,
				//短信验证码信息
				smsCodeKey: '',
				//短信验证码
				smsCode: '',
				//倒计时
				times,
				//绑定手机号
				bind: false,
				//是否首次登陆
				first: false,
				//授权信息
				oauth: {},
				//用户协议
				agreement: false
			};
		},
		//
		computed: {
			showCaptcha: function() {
				if ( this.captcha && this.captcha.base64 ) {
					return 'data:image/png;base64,' + this.captcha.base64;
				}
				return '';
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad( options ) {
			//获取图形验证码
			this.getCaptcha()
		},
		//
		methods: {
			//获取图形验证码
			getCaptcha() {
				const app = this
				CaptchaApi.simple().then( result => app.captcha = result.obj || {} )
			},
			//点击发送短信验证码
			handelSmsCaptcha() {
				const app = this
				if ( !app.isLoading && !app.smsState && app.formValidation( GET_CAPTCHA ) ) {
					app.sendSmsCaptcha()
				}
			},
			//表单验证
			formValidation( scene = GET_CAPTCHA ) {
				const app = this
				//验证获取短信验证码
				if ( scene === GET_CAPTCHA ) {
					if ( !app.validteMobile( app.mobile ) || !app.validteCaptchaCode( app.captchaCode ) ) {
						return false
					}
				}
				//验证提交登录
				if ( scene === SUBMIT_LOGIN ) {
					if ( !app.validteMobile( app.mobile ) || !app.validteSmsCode( app.smsCode ) ||
						!app.validteAgreement() ) {
						return false
					}
				}
				return true
			},
			//验证手机号
			validteMobile( str ) {
				if ( Verify.isEmpty( str ) ) {
					this.$app.toast( '请输入手机号' )
					return false
				}
				if ( !Verify.isMobile( str ) ) {
					this.$app.toast( '请输入正确格式的手机号' )
					return false
				}
				return true
			},
			//验证图形验证码
			validteCaptchaCode( str ) {
				if ( Verify.isEmpty( str ) ) {
					this.$app.toast( '请输入图形验证码' )
					return false
				}
				return true
			},
			//验证短信验证码
			validteSmsCode( str ) {
				if ( Verify.isEmpty( str ) ) {
					this.$app.toast( '请输入短信验证码' )
					return false
				}
				return true
			},
			//验证用户隐私政策
			validteAgreement() {
				if ( !this.agreement ) {
					this.$app.toast( '请勾选用户隐私政策' )
					return false
				}
				return true
			},
			//请求发送短信验证码接口
			sendSmsCaptcha() {
				const app = this
				
				app.isLoading = true
				VerifyApi.login( {
						phone: app.mobile,
						captcha: app.captchaCode
					}, app.captcha.token )
					.then( res => {
						if ( res.success ) {
							// 保存短信验证码的信息
							app.smsCodeKey = res.obj.key;
							// 显示发送成功
							app.$app.toast( '发送成功！' )
							// 执行定时器
							app.timer()
						} else if ( res.code === 30001 ) {
							app.$app.error( '图形验证码错误！' )
						} else {
							app.$app.error( res.msg || '发送验证码错误，请重试！' )
						}
					} ).finally( () => {
						app.isLoading = false;
					})
			},
			//执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval( () => {
					app.times = app.times - 1
					if ( app.times <= 0 ) {
						app.smsState = false
						app.times = times
						clearInterval( inter )
					}
				}, 1000 )
			},
			//勾选用户协议
			changeAgreement: function() {
				this.agreement = !this.agreement;
			},
			//点击登录
			handleLogin() {
				const app = this
				if ( !app.isLoading && app.formValidation( SUBMIT_LOGIN ) ) {
					app.submitLogin()
				}
			},
			//手机号确认登录
			submitLogin() {
				const app = this;
				app.isLoading = true;
				uni.showLoading({
					title: '正在登陆...',
					mask:true
				});
				let login = {
					name: app.oauth.nickname || '',
					headimg: app.oauth.headimg || '',
					phone: app.mobile,
					smsCode: app.smsCode,
					appId: app.oauth.appId || '',
					openId: app.oauth.openId || '',
					unionId: app.oauth.unionId || '',
					platform: app.$settings.platform
				}
				Platform.login( {
					smsCodeKey: app.smsCodeKey,
					login
				} ).then( ( res ) => {
					if ( res.success ) {
						setTimeout( () => {
							app.$app.redirectTo( this.pages.userIndexPage )
						}, 1000 );
					} else {
						app.$app.error( res.msg )
					}
				} ).catch( ( err ) => {
					app.$app.error( err.msg )
				} ).finally( () => {
					app.isLoading = false;
					uni.hideLoading() 
				});
			},
			//微信授权登陆
			wxLogin() {
				const options = this.$settings;
				const app = this
				//
				uni.showLoading({
					title: '正在登陆...',
					mask:true
				});
				app.isLoading = true
				Platform.wxLogin( options ).then( ( res ) => {
					if ( res.openId ) {
						setTimeout( () => {
							app.$app.redirectTo( this.pages.userIndexPage )
						}, 1000 );
						// app.bind = true;
						// app.oauth = res.obj;
					} else {
						app.$app.error( res.msg )
					}
				} ).catch( err => {
					if ( err && err.openId ) {
						app.bind = true;
						app.oauth = err;
					} else {
						//
						app.$app.error( '授权失败，请重新授权！' )
					}
				} ).finally( () => {
					app.isLoading = false;
					uni.hideLoading() 
				})
			},
			/**
			 * 授权成功，但是需要获取用户的手机号
			 */
			onEmitSuccess: function() {
				this.bind = false;
				this.first = true;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.custom-icon{
		height: 80rpx;
		width: 80rpx;
		margin: 20rpx;
	}
	
	.container {
		padding: 100rpx 80rpx;
		background: #fff;
		

		.header {
			display: flex;
			margin: 0 auto;
			justify-content: space-around;
			margin-bottom: 96rpx;

			.header-logo {
				position: relative;
				width: 160rpx;
				height: 132rpx;
			}
		}

		.login-form {
			
			.form-item {
				display: flex;
				padding: 18rpx;
				border-bottom: 1rpx solid #f3f1f2;
				margin-bottom: 25rpx;
				height: 96rpx;

				&--input {
					font-size: $uni-font-size-base;
					letter-spacing: 1rpx;
					flex: 1;
					height: 100%;
				}

				&--parts {
					min-width: 100rpx;
					height: 100%;
				}

				.captcha {
					height: 100%;

					.image {
						display: block;
						width: 192rpx;
						height: 100%;
					}
				}

				.captcha-sms {
					font-size: 22rpx;
					line-height: 50rpx;

					.activate {
						color: #F7441D;
					}

					.un-activate {
						color: #9e9e9e;
					}
				}
			}

			.login-button {
				width: 100%;
				height: 84rpx;
				margin-top: 70rpx;
				background: linear-gradient(118.17deg, #FEA370 0%, #FE2406 95.01%);
				text-align: center;
				line-height: 86rpx;
				color: #fff;
				border-radius: 16rpx;
				box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
				letter-spacing: 5rpx;
			}
		}

		//其他登陆方式
		.login-other {
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			.other {
				position: relative;
				padding-left: 20rpx;
				padding-right: 20rpx;
				font-size: $uni-font-size-base;
				color: gray;

				&::after {
					display: block;
					content: "";
					width: 60%;
					height: 1rpx;
					background-color: gray;
					position: absolute;
					top: 50%;
					left: -60%;
					transform: translateY(-50%);
				}

				&::before {
					display: block;
					content: "";
					width: 60%;
					height: 1rpx;
					background-color: gray;
					position: absolute;
					top: 50%;
					right: -60%;
					transform: translateY(-50%);
				}
			}

			.login-type {
				display: flex;
				margin: 0 auto;
				justify-content: space-around;
				margin-top: 10rpx;
				margin-bottom: 80rpx;

				.login-weixin {
					position: relative;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.login-footer {
			position: absolute;
			bottom: 60rpx;
			font-size: 26rpx;
			color: #848484;
			text-align: center;
			width: 100%;
			left: 0;
			
			.flex-y-center{
				justify-content: center;
			}
			.text-agreement {
				color: #0000cc;
			}

			.check-agreement {
				background: #F3F3F3;
				position: relative;
				border-radius: 50%;
				width: 34rpx;
				height: 34rpx;
				display: inline-block;
				border: 1rpx solid #ACACAC;

				&.checked {
					border: 1rpx solid #FFF;
					background-image: url("@/static/checked.png");
					background-repeat: no-repeat;
					/* 控制图片不重复 */
					background-size: cover;
					/* 调整图片大小以适应div尺寸 */
					/* 可选：以下属性用于对齐和定位图片 */
					background-position: center center;
					/* 居中对齐 */
					
				}
			}
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			line-height: 88rpx;
			background: #04be01;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			text-align: center;
		}
	}


	// .no-login-btn {
	// 	margin-top: 20rpx;
	// 	padding: 0 20rpx;

	// 	.button {
	// 		height: 88rpx;
	// 		line-height: 88rpx;
	// 		background: #dfdfdf;
	// 		color: #fff;
	// 		font-size: 30rpx;
	// 		border-radius: 999rpx;
	// 		text-align: center;
	// 	}
	// }
</style>